<script setup lang="ts">
import { useRouter } from "vue-router";
import { computed } from "vue";
import { useExperimentStore } from "@/stores/experimentStore";

const router = useRouter();
const experimentStore = useExperimentStore();

// 展示在首页的实验列表
const featuredExperiments = computed(() => {
  // 将已实现的实验放在前面
  return [
    ...experimentStore.implementedExperiments.slice(0, 3),
    ...experimentStore.experiments
      .filter((exp) => !exp.isImplemented)
      .slice(0, 6),
  ];
});

// 按类别分组的实验
const experimentsByCategory = computed(() => {
  return experimentStore.experimentsByCategory;
});

// Navigate to experiment page
function goToExperiment(routeName: string) {
  const experiment = experimentStore.experiments.find(
    (exp) => exp.route === routeName
  );
  if (experiment) {
    experimentStore.setCurrentExperiment(experiment.id);

    // 检查该实验是否有专门的路由
    const hasDefinedRoute = router.hasRoute(routeName);

    if (hasDefinedRoute) {
      router.push({ name: routeName });
    } else {
      // 使用通配符路由并传递ID参数
      router.push({
        name: "experiment-coming-soon",
        params: { id: experiment.id },
      });
    }
  }
}
</script>

<template>
  <div class="home-view">
    <div class="welcome-section">
      <h1 class="welcome-title">欢迎使用物理实验数据处理平台</h1>
      <p class="welcome-description">
        这个平台可以帮助您快速处理物理实验数据，进行误差分析，生成实验报告。
        选择下方的实验或使用左侧导航栏开始您的实验数据处理之旅。
      </p>
    </div>

    <div class="features-section">
      <h2 class="section-title">平台特色</h2>
      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">📊</div>
          <h3 class="feature-title">数据可视化</h3>
          <p class="feature-description">
            自动绘制实验数据图表，支持多种图表类型，帮助您直观理解实验结果
          </p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🧮</div>
          <h3 class="feature-title">自动计算</h3>
          <p class="feature-description">
            根据实验数据自动计算相关物理量，减少手动计算错误
          </p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">📝</div>
          <h3 class="feature-title">实验报告</h3>
          <p class="feature-description">
            根据处理结果生成规范的实验报告，包含数据表格、图表和分析
          </p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">📏</div>
          <h3 class="feature-title">误差分析</h3>
          <p class="feature-description">
            自动计算实验误差，包括标准差、相对误差等，提高实验精确度
          </p>
        </div>
      </div>
    </div>

    <div class="experiments-section">
      <h2 class="section-title">实验列表</h2>
      <div class="experiments-grid">
        <div
          v-for="experiment in featuredExperiments"
          :key="experiment.id"
          class="experiment-card"
          :class="{ 'is-coming-soon': !experiment.isImplemented }"
          @click="goToExperiment(experiment.route)"
        >
          <div class="experiment-icon">{{ experiment.icon }}</div>
          <div class="experiment-content">
            <div class="experiment-header">
              <h3 class="experiment-title">{{ experiment.name }}</h3>
              <span
                v-if="!experiment.isImplemented"
                class="status-badge coming-soon"
              >
                开发中
              </span>
              <span v-else class="status-badge implemented"> 已实现 </span>
            </div>
            <p class="experiment-description">
              {{ experiment.description }}
            </p>
          </div>
          <div class="experiment-action">
            <span class="action-text">{{
              experiment.isImplemented ? "开始实验" : "查看详情"
            }}</span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="action-icon"
              viewBox="0 0 20 20"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>

    <div class="category-section">
      <h2 class="section-title">实验分类</h2>
      <div class="categories-grid">
        <div
          v-for="category in experimentStore.categories.filter(
            (c) => c.id !== 'dev'
          )"
          :key="category.id"
          class="category-card"
          @click="router.push(`/category/${category.id}`)"
        >
          <div class="category-icon">{{ category.icon }}</div>
          <div class="category-content">
            <h3 class="category-title">{{ category.name }}</h3>
            <p class="category-count">
              {{ experimentsByCategory[category.id].length }} 个实验
              <span class="implemented-count">
                {{
                  experimentsByCategory[category.id].filter(
                    (e) => e.isImplemented
                  ).length
                }}
                个已实现
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home-view {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.welcome-section {
  text-align: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e5e7eb;
}

.welcome-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 1rem;
}

.welcome-description {
  font-size: 1.125rem;
  color: #4b5563;
  max-width: 42rem;
  margin: 0 auto;
  line-height: 1.7;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1.5rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}

.feature-card {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.feature-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
}

.feature-description {
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.5;
}

.experiments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.experiment-card {
  display: flex;
  background-color: #f9fafb;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  position: relative;
}

.experiment-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.experiment-card.is-coming-soon {
  background-color: #fafafa;
  border: 1px dashed #e5e7eb;
}

.experiment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  padding: 1.5rem;
  background-color: #eff6ff;
  color: #1d4ed8;
}

.experiment-card.is-coming-soon .experiment-icon {
  background-color: #f9fafb;
  color: #9ca3af;
}

.experiment-content {
  flex: 1;
  padding: 1.25rem;
}

.experiment-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.experiment-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.status-badge {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  font-weight: 500;
}

.status-badge.coming-soon {
  background-color: #fef3c7;
  color: #d97706;
}

.status-badge.implemented {
  background-color: #d1fae5;
  color: #059669;
}

.experiment-description {
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.5;
  margin: 0;
}

.experiment-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #eff6ff;
  color: #1d4ed8;
  font-weight: 500;
  font-size: 0.875rem;
  border-top-left-radius: 0.375rem;
}

.experiment-card.is-coming-soon .experiment-action {
  background-color: #f3f4f6;
  color: #6b7280;
}

.action-text {
  margin-right: 0.5rem;
}

.action-icon {
  width: 1rem;
  height: 1rem;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.category-card {
  display: flex;
  align-items: center;
  padding: 1rem;
  background-color: #f9fafb;
  border-radius: 0.5rem;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px -1px rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.06);
}

.category-icon {
  font-size: 1.75rem;
  margin-right: 1rem;
}

.category-content {
  flex: 1;
}

.category-title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.25rem 0;
}

.category-count {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

.implemented-count {
  font-size: 0.75rem;
  color: #059669;
  margin-left: 0.5rem;
}

@media (max-width: 640px) {
  .experiments-grid {
    grid-template-columns: 1fr;
  }

  .categories-grid {
    grid-template-columns: 1fr;
  }
}
</style>
